﻿<section class="section" id="tables">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#tables">Tables</a>
        </h1>
    </header>
    <div class="row">
        <div class="col-xs-24">
            <h4>Generic Table with Subtitle label</h4>
            <div class="table-responsive">
            <table class="table">
                <thead>
                  <tr>
                    <th>Item</th>
                    <th>Description</th>
                    <th class="text-right">Price</th>
                  </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Gadget Alpha</td>
                        <td>This is the amazing new Gadget Alpha.</td>
                        <td class="text-right">$0.99</td>
                    </tr>
                    <tr>
                        <td>Gadget Bravo</td>
                        <td>Also available is the Gadget Bravo which provides B.</td>
                        <td class="text-right">$2.99</td>
                    </tr>
                    <tr>
                        <td>Gadget Charlie</td>
                        <td>This is the lorem ipsumist Gadget Charlie.</td>
                        <td class="text-right">$1.99</td>
                    </tr>
                    <tr>
                        <td>Gadget Delta</td>
                        <td>Also available is the Gadget Bravo which provides B.</td>
                        <td class="text-right">$2.99</td>
                    </tr>
                    <tr>
                        <td>Gadget Echo</td>
                        <td>Gadget Delta is a solor dit lipsum for consumers.</td>
                        <td class="text-right">$2.99</td>
                    </tr>
                    <tr>
                        <td>Gadget Foxtrot</td>
                        <td>Gadget Echo provides solor dit for professionals.</td>
                        <td class="text-right">$1.99</td>
                    </tr>
                </tbody>
            </table>
          </div>

            <div class="row">
                <div class="col-xs-24">
                    <h4>Generic Table with Subtitle label (alt theme)</h4>
                    <div class="table-responsive">
                    <table class="table theme-alt">
                        <thead>
                          <tr>
                            <th>Item</th>
                            <th>Description</th>
                            <th class="text-right">Price</th>
                          </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Gadget Alpha</td>
                                <td>This is the amazing new Gadget Alpha.</td>
                                <td class="text-right">$0.99</td>
                            </tr>
                            <tr>
                                <td>Gadget Bravo</td>
                                <td>Also available is the Gadget Bravo which provides B.</td>
                                <td class="text-right">$2.99</td>
                            </tr>
                            <tr>
                                <td>Gadget Charlie</td>
                                <td>This is the lorem ipsumist Gadget Charlie.</td>
                                <td class="text-right">$1.99</td>
                            </tr>
                            <tr>
                                <td>Gadget Delta</td>
                                <td>Also available is the Gadget Bravo which provides B.</td>
                                <td class="text-right">$2.99</td>
                            </tr>
                            <tr>
                                <td>Gadget Echo</td>
                                <td>Gadget Delta is a solor dit lipsum for consumers.</td>
                                <td class="text-right">$2.99</td>
                            </tr>
                            <tr>
                                <td>Gadget Foxtrot</td>
                                <td>Gadget Echo provides solor dit for professionals.</td>
                                <td class="text-right">$1.99</td>
                            </tr>
                        </tbody>
                    </table>

                    {{#markdown}}
```xml
<div class="table-responsive">
<table class="table">
    <thead>
      <tr>
        <th>Item</th>
        <th>Description</th>
        <th class="text-right">Price</th>
      </tr>
    </thead>
    <tbody>
        <tr>
            <td>Gadget Alpha</td>
            <td>This is the amazing new Gadget Alpha.</td>
            <td class="text-right">$0.99</td>
        </tr>
        <tr>
            <td>Gadget Bravo</td>
            <td>Also available is the Gadget Bravo which provides B.</td>
            <td class="text-right">$2.99</td>
        </tr>
        <tr>
            <td>Gadget Charlie</td>
            <td>This is the lorem ipsumist Gadget Charlie.</td>
            <td class="text-right">$1.99</td>
        </tr>
        <tr>
            <td>Gadget Delta</td>
            <td>Also available is the Gadget Bravo which provides B.</td>
            <td class="text-right">$2.99</td>
        </tr>
        <tr>
            <td>Gadget Echo</td>
            <td>Gadget Delta is a solor dit lipsum for consumers.</td>
            <td class="text-right">$2.99</td>
        </tr>
        <tr>
            <td>Gadget Foxtrot</td>
            <td>Gadget Echo provides solor dit for professionals.</td>
            <td class="text-right">$1.99</td>
        </tr>
    </tbody>
</table>
</div>
```
                  {{/markdown}}

                  </div>

    <div class="row">
      <div class="col-md-24">
        <div class="guidance guidance-usage m-t-xs">
          {{#markdown}}
{{> table-guidance.md}}
          {{/markdown}}
        </div>
      </div>
    </div>

    <div class="row">
        <div class="col-xs-24">
            <h4>A generic table with bottom borders.</h4>
            <div class="table-responsive">
              <table class="table table-striped">
                  <thead>
                    <tr>
                      <th>Item</th>
                      <th>Description</th>
                      <th class="text-right">Price</th>
                    </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>Gadget Alpha</td>
                          <td>This is the amazing new Gadget Alpha.</td>
                          <td class="text-right">$0.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Bravo</td>
                          <td>Also available is the Gadget Bravo which provides B.</td>
                          <td class="text-right">$2.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Charlie</td>
                          <td>This is the lorem ipsumist Gadget Charlie.</td>
                          <td class="text-right">$1.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Delta</td>
                          <td>Also available is the Gadget Bravo which provides B.</td>
                          <td class="text-right">$2.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Echo</td>
                          <td>Gadget Delta is a solor dit lipsum for consumers.</td>
                          <td class="text-right">$2.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Foxtrot</td>
                          <td>Gadget Echo provides solor dit for professionals.</td>
                          <td class="text-right">$1.99</td>
                      </tr>
                  </tbody>
              </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-24">
            <h4>A generic table with bottom borders. With Alternate Theme</h4>
            <div class="table-responsive">
              <table class="table table-striped theme-alt">
                  <thead>
                    <tr>
                      <th>Item</th>
                      <th>Description</th>
                      <th class="text-right">Price</th>
                    </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>Gadget Alpha</td>
                          <td>This is the amazing new Gadget Alpha.</td>
                          <td class="text-right">$0.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Bravo</td>
                          <td>Also available is the Gadget Bravo which provides B.</td>
                          <td class="text-right">$2.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Charlie</td>
                          <td>This is the lorem ipsumist Gadget Charlie.</td>
                          <td class="text-right">$1.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Delta</td>
                          <td>Also available is the Gadget Bravo which provides B.</td>
                          <td class="text-right">$2.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Echo</td>
                          <td>Gadget Delta is a solor dit lipsum for consumers.</td>
                          <td class="text-right">$2.99</td>
                      </tr>
                      <tr>
                          <td>Gadget Foxtrot</td>
                          <td>Gadget Echo provides solor dit for professionals.</td>
                          <td class="text-right">$1.99</td>
                      </tr>
                  </tbody>
              </table>
            </div>
            {{#markdown}}
```xml
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Item</th>
          <th>Description</th>
          <th class="text-right">Price</th>
        </tr>
      </thead>
        <tbody>
          <tr>
          <td>Gadget Alpha</td>
          <td>This is the amazing new Gadget Alpha.</td>
          <td class="text-right">$0.99</td>
          </tr>
        <tr>
          <td>Gadget Bravo</td>
          <td>Also available is the Gadget Bravo which provides B.</td>
          <td class="text-right">$2.99</td>
        </tr>
        <tr>
          <td>Gadget Charlie</td>
          <td>This is the lorem ipsumist Gadget Charlie.</td>
          <td class="text-right">$1.99</td>
        </tr>
        <tr>
          <td>Gadget Delta</td>
          <td>Also available is the Gadget Bravo which provides B.</td>
          <td class="text-right">$2.99</td>
        </tr>
        <tr>
          <td>Gadget Echo</td>
          <td>Gadget Delta is a solor dit lipsum for consumers.</td>
          <td class="text-right">$2.99</td>
        </tr>
        <tr>
          <td>Gadget Foxtrot</td>
          <td>Gadget Echo provides solor dit for professionals.</td>
          <td class="text-right">$1.99</td>
        </tr>
      </tbody>
    </table>
  </div>
```
          {{/markdown}}
        </div>
    </div>

    <div class="row">
      <div class="col-md-24">
        <div class="guidance guidance-usage m-t-xs">
          {{#markdown}}
{{> table-with-borders-guidance.md}}
          {{/markdown}}
        </div>
      </div>
    </div>
</section>
